<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.Gbox{
				width: 100%;
			}
			.box1 {
				width: 25%;
				box-sizing: border-box;
				border-right:1px solid #ccc;
				float: left;
				
			}
		 	.box1 button{
				width: 100%;
				height: 40px;
				text-align: center;
				margin-bottom: 2px;
				/*background: #ccc;*/
			}
			.box2{
				box-sizing: border-box;
				width: 75%;
				float: right;
				
			}
			iframe{
				width: 100%;
				height: 1000px;
			}
			button{
				background: skyblue;
				opacity: 0.8;
			}
		</style>
	</head>

	<body>
		<div class="Gbox">
			<div class="box1">
				
				<button>认识js变量以及数据类型判断</button>
				<button>流程控制、循环和运算符</button>
				<button>数组</button>
				<button>字符串</button>
				<button>函数和作用域</button>
				<button>计时器</button>
				<button>Date</button>
				<button>DOM获取</button>
				<button>DOM删除</button>
				<button>DOM样式</button>
				<button>DOM添加</button>
				
			</div>
			<div class="box2">
				
				<iframe src="认识js变量以及数据类型判断.htm"></iframe>
			</div>
		</div>
         <script src="jquery-2.1.0.js"></script>
         <script type="text/javascript">
         	var text;
         	$('.box1').on('click',function(e){
         		if($(e.target).is('button')==true){
         			text = $(e.target).text()
         			console.log(text);
         			$('.box2 iframe').eq(0).remove()
         			$('.box2').append('<iframe src="'+text+'.htm"></iframe>')
         		}
         	})
         </script>
	</body>

</html>